<template>
  <div class="myChart" ref="myChart"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { OneChart } from "@/apis/echartsData/echartData.js";
const myChart = ref(null);
onMounted(() => {
  let ECharts = echarts.init(myChart.value);
  ECharts.showLoading();
  // 后面就是那接口的数据了
  OneChart().then((res) => {
    let xData = res.data.map((v) => v.title);
    let yData = res.data.map((v) => v.num);
    ECharts.hideLoading();
    let option = {
      grid: {
        x: 50,
        y: 50,
        x2: 50,
        y2: 60,
        containLable: true,
      },
      title: {
        text: "ECharts 商品销量",
        left: "center",
        textStyle: {
          color: "#fff",
          fontSize: 20,
        },
      },
      xAxis: {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {
        type: "category",
        data: xData,
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          type: "bar",
          data: yData,
          itemStyle: {
            normal: {
              barBorderRadius: [0, 20, 20, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#005eaa",
                },
                {
                  offset: 0.5,
                  color: "#339ca8",
                },
                {
                  offset: 1,
                  color: "#cda819",
                },
              ]),
            },
          },
        },
      ],
    };
    ECharts.setOption(option);
  });
});
</script>


<style lang="less" scoped>
.myChart {
  height: 21rem;
  border: 1px solid blue;
  margin: 1.25rem;
  background-color: rgba(12, 130, 255, 0.65);
  padding-top: 1.8rem;
}
</style>